<template>
  <div id="app">
    <div style="width: 100%; height: 100%;" ref="main2"></div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {
      popsList: [],
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    initInfo(item) {
      // console.log(item, "itemitemitemitemitem");
      this.drawChart();
    },
    drawChart() {
        // 基于准备好的dom，初始化echarts实例

        // let myChart = this.$echarts.init(document.getElementById('main2'));
        let that = this;
        let myChart = this.$echarts.init(this.$refs.main2);
        // 指定图表的配置项和数据
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            textStyle:{
              fontSize: 15,//字体大小
              color: '#38BBEE'//字体颜色
            },
          },
          grid: {
            top: '18%',
            left: '3%',
            right: '4%',
            bottom: '0%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              data: that.data.map(v => v.资质认定城市),
              axisLabel: {
                textStyle: {
                  color: '#38BBEE'
                  //fontSize: 18
                },
              },
            }
          ],
          yAxis: [
            {
              type: 'value',
              // name: '总和',
              min: 0,
              max: 6000,
              interval: (6000-0)/5,
              color: '#38BBEE',
              axisLabel: {
                textStyle: {
                  color: '#38BBEE'
                  //fontSize: 18
                },
                formatter: '{value} '
              },
            },
            {
              type: 'value',
              // name: '增长率',
              min: 0,
              max: 6000,
              interval: (6000-0)/5,
              axisLabel: {
                textStyle: {
                  color: '#38BBEE'
                  //fontSize: 18
                },
                formatter: '{value}'
              },
              axisLine: {
                lineStyle: {
                  color: '#666'
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#666'
                }
              }
            }
          ],
          series: [
            {
              name: '高新企业数量',
              // data: [250, 330, 424, 218, 635, 547, 860],
              data: that.data.map(v => v.高新企业数量),
              type: 'bar',
              barWidth: 10,
              itemStyle: {
                normal: {
                  color: '#A342E7'
                },
              }
            },
            {
              name: '科技型中小企业数量',
              type: 'bar',
              barWidth: 10,
              // data: [250, 330, 424, 218, 635, 547, 860],
              data: that.data.map(v => v.科技型中小企业数量),
              itemStyle: {
                normal: {
                  color: '#5ACAF4'
                },
              }
            },
            {
              name: '专精特新企业数量',
              type: 'bar',
              barWidth: 10,
              // data: [250, 330, 424, 218, 635, 547, 860],
              data: that.data.map(v => v.专精特新企业数量),
              itemStyle: {
                normal: {
                  color: '#7DFBC3'
                },
              }
            },
          ]
        };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped lang="scss">
#main2 {
//   margin-top: 10px;
}
</style>
